function getGoodsList() {
    return new Promise(function (resolve, reject) {
        let xhr = {}
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest()
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP')
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let res = xhr.response
                resolve(res)
            }
        }
        xhr.open('GET', '../list.json', true)
        xhr.send()
    })
}

// getGoodsList().then(function(res) {
//   console.log(res)
// }).catch(function(e) {
//   console.log(e)
// })

//ajax是一个异步操作，异步操作的结果是在不确定的未来获得的
//Promise是一个容器，可以保存异步执行的结果(没有异常的结果，异常的结果)
//还有另外一种方式获得Promise中的结果async-await
;
(async function appendEl() {
    let res = await getGoodsList()
    //json字符串 "{"+"name":"tom"+"}"
    //把json字符串转换成json对象 let obj = {"name":"tom"}
    let arr = JSON.parse(res)
    console.log(arr)
    let tb = `<table border="1" cellpadding="0" cellspacing="0">`
    tb += `<tr>
        <th>id</th>  
        <th>img</th>
        <th>name</th>
        <th>price</th>
        </tr>
      `
    let n = arr.length
    for (let i = 0; i < n; i++) {
        //就是一个商品对象
        let obj = arr[i]
        tr = `<tr>
          <td>${obj.id}</td>
          <td><img src="${obj.imgUrl}" width="100"/></td>
          <td>${obj.name}</td>
          <td>$${obj.price}</td>
        </tr>`
        tb += tr
    }
    tb += `</table>`
    app.innerHTML = tb
})()